<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stat-item">
            <i class="el-icon-notebook-2"></i>
            <div>
              <div class="stat-title">博客总数</div>
              <div class="stat-value">{{ stats.blogCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stat-item">
            <i class="el-icon-chat-line-round"></i>
            <div>
              <div class="stat-title">评论总数</div>
              <div class="stat-value">{{ stats.commentCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="stat-item">
            <i class="el-icon-view"></i>
            <div>
              <div class="stat-title">总浏览量</div>
              <div class="stat-value">{{ stats.totalReadCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 折线图 -->
    <el-card shadow="hover">
      <div ref="chart" style="height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "HomeStats",
  data() {
    return {
      stats: {
        blogCount: 0,
        commentCount: 0,
        totalReadCount: 0,
        dailyBlogs: []
      },
      chart: null
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$request.get('/stats').then(res => {
        this.stats = res.data;
        this.initChart();
      });
    },
    // initChart() {
    //   this.chart = echarts.init(this.$refs.chart);
    //   const option = {
    //     title: { text: '每日博客发布趋势' },
    //     tooltip: { trigger: 'axis' },
    //     xAxis: {
    //       type: 'category',
    //       data: this.stats.dailyBlogs.map(item => item.date)
    //     },
    //     yAxis: { type: 'value' },
    //     series: [{
    //       data: this.stats.dailyBlogs.map(item => item.count),
    //       type: 'line',
    //       smooth: true,
    //       areaStyle: {}
    //     }]
    //   };
    //   this.chart.setOption(option);
    //   window.addEventListener('resize', () => this.chart.resize());
    // }


    initChart() {
      // 初始化 ECharts 图表实例
      this.chart = echarts.init(this.$refs.chart);
      // 定义图表的配置项
      const option = {
        title: { text: '每日博客发布趋势' }, // 图表标题
        tooltip: { trigger: 'axis' },       // 提示框触发类型（坐标轴触发）
        // X 轴配置
        xAxis: {
          type: 'category', // 类目轴
          data: this.stats.dailyBlogs.map(item => item.date) // X 轴数据，从 this.stats.dailyBlogs 中提取日期
        },
        // Y 轴配置
        yAxis: { type: 'value' }, // 值轴
        // 图表系列配置
        series: [{
          data: this.stats.dailyBlogs.map(item => item.count), // 系列数据，从 this.stats.dailyBlogs 中提取发布数量
          type: 'line', // 图表类型为折线图
          smooth: true, // 折线平滑
          areaStyle: {} // 区域填充样式
        }]
      };
      // 将配置项设置到图表实例中
      this.chart.setOption(option);
      // 监听窗口大小变化事件，动态调整图表大小
      window.addEventListener('resize', () => this.chart.resize());
    }

  },
  beforeDestroy() {
    if (this.chart) {
      window.removeEventListener('resize', () => this.chart.resize());
      this.chart.dispose();
    }
  }
};
</script>

<style scoped>
.stat-item {
  display: flex;
  align-items: center;
  padding: 20px;
}
.stat-item i {
  font-size: 40px;
  margin-right: 20px;
  color: #409EFF;
}
.stat-title {
  color: #909399;
  margin-bottom: 10px;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
}
</style>